<template>
	<view class='uni-flex  main' style="-webkit-justify-content: space-between;justify-content: space-between;">
		<view class='uni-flex'>
			<view class=' uni-flex '>
				<uni-data-select class="search_fileds" :class="{ispadding:hasLeftWin}  " :clear="false"
					v-model="fileds_title" :localdata="fileds" @change="fileds_change"></uni-data-select>


				<uni-data-select class="search" :class="{ispadding:hasLeftWin}  " :clear="false"
					v-model="contions_value" :localdata="contions" ></uni-data-select>

				<uni-easyinput class="text" :class="{ispadding:hasLeftWin}  " focus placeholder="" v-model='seach_text'
					v-if="contions_type==='input'">

				</uni-easyinput>

				<uni-datetime-picker class="daterange"
					v-else-if="contions_type === 'date' && contions_value !='between' " type="date" :clear-icon="false"
					v-model="seach_date" />
				<uni-datetime-picker class="daterange"
					v-else-if="contions_type === 'datetime' && contions_value !='between' " type="datetime" :clear-icon="false"
					v-model="seach_datetime" />
				<uni-datetime-picker class="daterange"
					v-else-if="contions_type === 'datetime' && contions_value ==='between' " v-model="search_datetimeRange"
					type="datetimerange"  rangeSeparator="至" :clear-icon="false"
					start-placeholder="开始日期" />
				<uni-datetime-picker class="daterange"
					v-else-if="contions_type === 'date' && contions_value ==='between' " v-model="search_dateRange"
					type="daterange"  rangeSeparator="至" :clear-icon="false"
					start-placeholder="开始日期" />
				<uni-number-box class="number" v-else-if="contions_type === 'number' && contions_value !='between' "
					:min="0" :max="9" v-model="seach_number"></uni-number-box>
				<text class="search" v-else>456</text>
			</view>
			<view class='uni-flex uni-row main'>
				<button class="sumbit" type="primary" plain @click="buttonClick_search">查询</button>
				<button class="sumbit" type="primary" plain @click="buttonClick_reset">重置</button>
			</view>
		</view>


	</view>

</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	import store from "@/store/index.js"
	const props = defineProps({
			fileds: {
				type: Object,
				required: true,
				default () {
					return []
				}
			}
		}

	)

	const emit = defineEmits(['submit'])
	const hasLeftWin = computed(() => store.state.noMatchLeftWindow)

	const seach_text = ref('');
	
	const seach_number = ref(1);
	const contions_value = ref('like');
	const contions = ref([{
			value: 'like',
			text: "包含"
		},
		{
			value: '=',
			text: "等于"
		},
		{
			value: '>',
			text: "大于"
		},
		{
			value: '<',
			text: "小于"
		},
		{
			value: '>=',
			text: "不小于"
		},
		{
			value: '<=',
			text: "不大于"
		},
	]);
	const contions_type = ref('input')

	const fileds_title = ref('');
	// 计算当前日期前一年到现在当月月底的日期范围
	const currentDate = new Date();
	const year = currentDate.getFullYear();
	const month = currentDate.getMonth();
	const lastDayOfMonth = new Date(year, month + 2, 0).getDate();
	
	const startDate = new Date(year - 1, month, 1).toISOString().split('T')[0];
	const endDate = new Date(year, month, lastDayOfMonth).toISOString().split('T')[0];
	const seach_date = ref(currentDate.toISOString().split('T')[0]);
	const search_dateRange = ref([startDate, endDate]);
	// 格式化日期为 YYYY-MM-DD HH:mm:ss 格式的函数
	function formatDateTime(date){
	    const year = date.getFullYear();
	    const month = String(date.getMonth() + 1).padStart(2, '0');
	    const day = String(date.getDate()).padStart(2, '0');
	    const hours = String(date.getHours()).padStart(2, '0');
	    const minutes = String(date.getMinutes()).padStart(2, '0');
	    const seconds = String(date.getSeconds()).padStart(2, '0');
	    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
	};
	const startDatetime = new Date(year - 1, month, 1);
	const endDatetime = new Date(year, month, lastDayOfMonth, 23, 59, 59);
	const search_datetimeRange = ref([formatDateTime(startDatetime), formatDateTime(endDatetime)]);
	const seach_datetime = ref(formatDateTime(currentDate));
	//根据字段显示不同的条件
	const fileds_change = () => {
		let column_type;
		if (fileds_title.value) {
			
			props.fileds.forEach((filed) => {
				if (filed.text === fileds_title.value) {
					column_type = filed.column_type
				}
			});
		}
		
		if (column_type.includes('VARCHAR') || column_type.includes('varchar')  ) {
			contions.value = [{
					value: 'like',
					text: "包含"
				},
				{
					value: '=',
					text: "等于"
				},
			];
			contions_type.value = 'input'
			contions_value.value = 'like'
		} else if (column_type.includes('decimal') || column_type.includes('int') || column_type.includes('NUMERIC') || column_type.includes('INTEGER')) {
			contions.value = [{
					value: '=',
					text: "等于"
				},
				{
					value: '>',
					text: "大于"
				},
				{
					value: '<',
					text: "小于"
				},
				{
					value: '>=',
					text: "不小于"
				},
				{
					value: '<=',
					text: "不大于"
				},
			];
			contions_type.value = 'number'
			contions_value.value = '='
		} else if (column_type.includes('DATETIME') || column_type.includes('datetime')) {
			contions.value = [{
					value: 'between',
					text: "介于"
				},
				
				{
					value: '=',
					text: "等于"
				},
				{
					value: '>',
					text: "大于"
				},
				{
					value: '<',
					text: "小于"
				},
				{
					value: '>=',
					text: "不小于"
				},
				{
					value: '<=',
					text: "不大于"
				}

			];
			contions_type.value = 'datetime'
			contions_value.value = 'between'
		}else if (column_type.includes('DATE') || column_type.includes('date')) {
			contions.value = [{
					value: 'between',
					text: "介于"
				},
				
				{
					value: '=',
					text: "等于"
				},
				{
					value: '>',
					text: "大于"
				},
				{
					value: '<',
					text: "小于"
				},
				{
					value: '>=',
					text: "不小于"
				},
				{
					value: '<=',
					text: "不大于"
				}

			];
			contions_type.value = 'date'
			contions_value.value = 'between'
		} else {
			contions.value = [
				{
					value: 'like',
					text: "包含"
				},
				{
					value: '=',
					text: "等于"
				},
				{
					value: '>',
					text: "大于"
				},
				{
					value: '<',
					text: "小于"
				},
				{
					value: '>=',
					text: "不小于"
				},
				{
					value: '<=',
					text: "不大于"
				},
			];
			contions_value.value = 'like'
		}


	}

	//查询按钮
	const buttonClick_search = () => {
		let seach_content = ''
		if (contions_type.value == 'input') {
			seach_content = seach_text.value

		} else if (contions_type.value == 'datetime' && contions_value.value != 'between') {
			seach_content = seach_datetime.value
		} else if (contions_type.value == 'datetime' && contions_value.value === 'between') {
			seach_content = search_datetimeRange.value
		}else if (contions_type.value == 'date' && contions_value.value != 'between') {
			seach_content = seach_date.value
		} else if (contions_type.value == 'date' && contions_value.value === 'between') {
			seach_content = search_dateRange.value
		} else if (contions_type.value == 'number') {
			seach_content = seach_number.value
		}
		
		if (seach_content && fileds_title.value ) {
			
			emit('submit', {
				'contions_value': contions_value.value,
				'contions_type': contions_type.value,
				'fileds_title': fileds_title.value,
				'seach_content': seach_content
			})
		} else {
			fileds_title.value=''
			if(contions_type.value === 'input'){
				contions_value.value = 'like'
				
			}
			
			
			emit('submit', {})
		}

	}
	//重置查询条件
	const buttonClick_reset=()=>{
		
		fileds_title.value=''
		contions_type.value = 'input'
		contions_value.value = 'like'
		seach_text.value=''	
		contions.value = [
			{
				value: 'like',
				text: "包含"
			},
			{
				value: '=',
				text: "等于"
			},
			{
				value: '>',
				text: "大于"
			},
			{
				value: '<',
				text: "小于"
			},
			{
				value: '>=',
				text: "不小于"
			},
			{
				value: '<=',
				text: "不大于"
			},
		];
		emit('submit', {})
		
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 10rpx;
	}

	.text {

		padding: 0 5rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
		min-width: 350rpx;
	}

	.sumbit {
		margin: 0 10rpx;
		padding: 0 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
		min-width: 50rpx;

	}

	.ispadding {
		margin: 15rpx 10rpx;
		padding: 0 30rpx;

	}

	.number {

		margin: 15rpx 10rpx;
		padding: 0 0rpx;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}

	.search {
		min-width: 80px;

		padding: 0 5rpx;
	}

	.search_fileds {
		min-width: 180px;
		padding: 0 5rpx;
	}

	.data {
		min-width: 80px;
	}

	.daterange {
		min-width: 280px;
		margin: 15rpx 10rpx;
		padding: 0 0rpx;
		background-color: #fff;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}
</style>